<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'工资详情',liner:false}">
		</header-top>
		<view class="mainpadding">
			<view class=" bigbox ffffff">
				<view class="topbox">
					<view class="time flexcenter">
						<!-- <view class="sanjiao1" @click="upmonth"></view> -->
						<view class="texttime">{{nyreturn(dataAll.mouth_time*1000)}}</view>
						<!-- <view class="sanjiao2" @click="downmonth"></view> -->
					</view>
					<!-- <view class="gongzi">{{dataAll.real_wage || "暂无信息"}}</view>
					<view class="yuan yuan1"></view>
					<view class="yuan yuan2"></view> -->
				</view>
				<view class="bottombox">
					<view class="titlegongzi">工资明细</view>
					<view class="flexbetween boxs">
						<view class="xinxi">姓名</view>
						<view class="neirong">{{dataAll.staff.username || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">电话</view>
						<view class="neirong">{{dataAll.staff.mobile  || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">基本工资</view>
						<view class="neirong">￥{{dataAll.base_price || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">提成</view>
						<view class="neirong">￥{{dataAll.tc_price || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">奖金</view>
						<view class="neirong">￥{{dataAll.jj_price || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">请假扣款</view>
						<view class="neirong">￥{{dataAll.qj_price || "暂无信息"}}</view>
					</view>
					<view class="flexbetween boxs">
						<view class="xinxi">实际工资</view>
						<view class="neirong">￥{{dataAll.sj_price || "暂无信息"}}</view>
					</view>
					<view class="boxs">
						<view class="xinxi">备注:
							<text>{{dataAll.notes}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll:{},
				pageShow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		watch:{
			month(){
				this.init()
			}
		},
		methods: {
			init() {
				httpRequest.request('/dhtapi/user/staffGzInfo', 'POST',{
					id:this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			nyreturn(time3) {
				//将时间戳格式转换成年月
				var date = new Date(time3);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var strDate = Y + M
				return strDate
			
			},
			// 上一月
			// upmonth() {
			// 	if(!this.dataAll){
			// 		return
			// 	}
			// 	this.month = Number(this.month) + 1
			// 	// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
			// 	let date = httpRequest.getMonthDay(this.month, "")
			// 	// 如果当前时间与返回回来的时间重合返回上一状态
			// 	if (this.timemonth == date) {
			// 		this.month = Number(this.month) - 1
			// 		return false
			// 	} else {
			// 		this.timemonth = date
			// 	}
			// },
			// 下一月
			// downmonth() {
			// 	if (this.month <= 1) {
			// 		return false
			// 	}
			// 	this.month = Number(this.month) - 1
			// 	if (this.month == 0) {
			// 		// this.reset()
			// 		return false
			// 	}
			// 	// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
			// 	this.timemonth = httpRequest.getMonthDay(this.month, "")
			// 	console.log(this.timemonth,9899)
			// },
			// reset() {
			// 	let timemonth = httpRequest.dateTimeStr('y-m'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			// 	this.timemonth = timemonth
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.sanjiao1 {
		border: 16rpx solid transparent;
		border-right: 16rpx solid #0BBDCB;
	}

	.sanjiao2 {
		border: 16rpx solid transparent;
		border-left: 16rpx solid #0BBDCB;
	}

	.bigbox {
		background: #FFFFFF;
		padding: 48rpx 30rpx 96rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.texttime {
		font-size: 32rpx;
		margin: 0 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.gongzi {
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		text-align: center;
		line-height: 38rpx;
		margin: 54rpx 0 20rpx;
	}

	.titlegongzi {
		font-size: 32rpx;
		text-align: center;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		margin-bottom: 12rpx;
	}

	.topbox {
		position: relative;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dashed rgba(0, 0, 0, .1);
	}

	.bottombox {
		padding: 40rpx 30rpx 0;
	}

	.xinxi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.neirong {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.boxs {
		margin-top: 40rpx;
	}

	.yuan {
		width: 48rpx;
		height: 48rpx;
		background: #FAFAFA;
		border-radius: 50%;
	}

	.yuan1 {
		position: absolute;
		left: -7%;
		bottom: -12%;
	}

	.yuan2 {
		position: absolute;
		right: -7%;
		bottom: -12%;
	}
</style>
